<template>
  <div class="user-container1 cu-container">
    <div class="search-container p-[20px]">
      <el-divider content-position="left">计划详情</el-divider>
      <el-descriptions title="">
        <el-descriptions-item label="巡检计划名称:">{{
          editData.planSetName
        }}</el-descriptions-item>
        <el-descriptions-item label="巡检任务名称:">{{
          editData.taskName
        }}</el-descriptions-item>
        <el-descriptions-item label="巡检类型:">
          <el-tag v-if="editData.taskType == 2" type="danger">区域</el-tag>
          <el-tag v-if="editData.taskType == 1" type="warning">路线</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="巡检路线:">
          {{ editData.inspDestName }}
        </el-descriptions-item>
        <el-descriptions-item label="巡检部门:">{{
          editData.inspDeppartmentName
        }}</el-descriptions-item>
        <el-descriptions-item label="巡检人员:">{{
          editData.inspUserName
        }}</el-descriptions-item>
        <el-descriptions-item label="计划类型:"
          >{{}}

          <el-tag v-if="editData.planSetType == 1" type="primary"
            >日计划</el-tag
          >
          <el-tag v-if="editData.planSetType == 2" type="success"
            >周计划</el-tag
          >
          <el-tag v-if="editData.planSetType == 3" type="info">月计划</el-tag>
          <el-tag v-if="editData.planSetType == 4" type="warning"
            >季计划</el-tag
          >
          <el-tag v-if="editData.planSetType == 5" type="danger">年计划</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="是否避开节假日:">
          <el-tag v-if="editData.isAvoidHoliday" type="success">是</el-tag>

          <el-tag v-else type="warning">否</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="是否完成:">
          <span v-if="editData.status == 1">巡检中</span>
          <span v-if="editData.status == 2">已完成</span>
          <span v-if="editData.status == 3">已暂停</span>
          <span v-if="editData.status == 4">系统自动完成</span>
          <span v-if="editData.status == 0">待处理</span>
        </el-descriptions-item>
        <el-descriptions-item label="是否存在隐患:">
          <el-tag v-if="editData.dangerCount > 0" type="success">是</el-tag>

          <el-tag v-else type="warning">否</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="开始巡检时间:">
          {{ editData.beginTime ? editData.beginTime : "-" }}
        </el-descriptions-item>
        <el-descriptions-item label="结束巡检时间:">
          {{ editData.doneTime ? editData.doneTime : "-" }}
        </el-descriptions-item>
        <el-descriptions-item label="巡检点总数:"
          >{{
            editData.inspCount ? editData.inspCount : 0
          }}个</el-descriptions-item
        >
        <el-descriptions-item label="隐患数量:">{{
          editData.dangerCount ? editData.dangerCount : 0
        }}</el-descriptions-item>
        <el-descriptions-item label="巡检距离:"
          >{{
            editData.inspLineLength ? editData.inspLineLength : 0
          }}m</el-descriptions-item
        >
        <el-descriptions-item label="巡检时长:"
          >{{
            editData.inspDuration ? editData.inspDuration : 0
          }}h</el-descriptions-item
        >
      </el-descriptions>
    </div>

    <div class="search-container p-[20px] mt-[20px]">
      <el-divider content-position="left">巡检详情</el-divider>
      <el-row>
        <el-col :span="8">
          <el-table
            :data="tableData"
            header-row-class-name="table-header"
            size="small"
            highlight-current-row
            @row-click="f_ClickRow"
            :height="tableHeight"
          >
            <el-table-column
              type="index"
              width="60"
              label="序号"
              align="center"
            />
            <el-table-column prop="pointId" label="巡检点名称" align="center">
              <template #default="scope">
                {{ scope.row.point.pointName }}（{{
                  scope.row.point.pointGisNo
                }}）
              </template>
            </el-table-column>
            <el-table-column prop="pointId" label="类型" align="center">
              <template #default="scope">
                {{ scope.row.point.className }}
              </template>
            </el-table-column>
          </el-table>
        </el-col>
        <el-col :span="16">
          <div style="width: 500px; margin: 0 auto">
            <div style="height: 28px; text-align: center; color: #2196f3">
              巡检单信息
            </div>
            <cu_form v-if="contentJson.length" :content-json="contentJson" />
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script setup lang="ts">
defineOptions({
  name: "InspectionAction",
  inheritAttrs: false,
});
import { find } from "lodash";
import moment from "moment";
let tableHeight = ref(0);
import TaskSetAPI from "@/api/TaskSetAPI";
import cu_form from "./form.vue";
let props = defineProps(["form", "taskData", "pointData"]);
const pointData = ref(props.pointData);
const tableData = ref([]);
let editData = reactive(props.form);
const contentJson = ref([]);
const emits = defineEmits(["close"]);

// 返回图片列表
function f_GetPreviewList(data) {
  if (data == "") return;
  let arr = [];
  data.forEach((item) => {
    arr.push(item.url);
  });

  return arr;
}

// 行点击
function f_ClickRow(data: any) {
  if (typeof data.inspContent == "string") {
    contentJson.value = JSON.parse(data.inspContent);
  } else {
    contentJson.value = data.inspContent;
  }
}

// 查询
function f_HandelQueryDetail() {
  TaskSetAPI.api_detail(editData.taskId).then(({ data, succeeded }) => {
    if (succeeded) {
      tableData.value = data;
      tableData.value.forEach((item, index) => {
        let tempPointData = find(pointData.value, { pointId: item.pointId });
        if (tempPointData) {
          tableData.value[index].point.pointName = tempPointData.pointName;
        } else {
          tableData.value[index].point.pointName = item.point.pointName;
        }
      });

      tableData.value = JSON.parse(JSON.stringify(tableData.value));
      console.log(tableData.value);

      if (tableData.value.length) {
        if (typeof tableData.value[0].inspContent == "string") {
          contentJson.value = JSON.parse(tableData.value[0].inspContent);
        } else {
          contentJson.value = tableData.value[0].inspContent;
        }
      }
    }
  });
}

window.onresize = () => {
  return (() => {
    tableHeight.value = window.innerHeight - 320;
  })();
};

onMounted(() => {
  f_HandelQueryDetail();
  tableHeight.value = window.innerHeight - 320;
});
</script>
<style lang="scss" scoped>
.user-container1 {
  padding: 0 !important;
  padding-bottom: 60px !important;

  .el-divider {
    margin: 12px 0 28px;

    :deep .el-divider__text {
      margin-left: -40px;
      font-family: fangsong, sans-serif;
      font-size: 16px;
      font-weight: bold;
      color: #32bebd;
    }
  }

  :deep .el-descriptions__table {
    tbody {
      tr:nth-child(2n + 1) {
        background-color: #f5f5f5;
      }

      .el-descriptions__label {
        font-size: 12px;
      }

      .el-descriptions__content {
        font-size: 12px;
      }

      .el-descriptions__cell {
        padding-top: 6px;
        padding-bottom: 6px !important;
        padding-left: 12px;
      }
    }
  }

  .search-container {
    height: 100%;
    margin-bottom: 0;
    background: #fff;
  }
}
</style>
<style lang="scss">
.user-dialog {
  background: #f5f5f5;

  .el-dialog__body {
    padding: 15px !important;
    font-size: 14px !important;

    .el-checkbox__input,
    .el-checkbox__original,
    .el-checkbox__inner {
      cursor: not-allowed;
    }
  }
}
</style>
